<template>
  <div class="pages-wrapper">
    <div
      class="app-container"
      v-loading="downLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div style="display:flex;height:50px;line-height:40px;position:relative">
        <div class="title">业务意向</div>
        <div style="height:40px ;position:absolute;right:0">
          <el-form label-width="100px">
            <el-form-item label="数据日期">
              <el-date-picker
                v-model="dataTime"
                type="date"
                placeholder="选择日期"
                :clearable="true"
                value-format="yyyy-MM-dd"
                @change="changeDate"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-card style="padding:13px 20px 7px">
        <el-row :gutter="24" class="w-el-row">
          <el-col :span="8">
            <div class="el-input-group el-input-group-prepend" style="width:100%">
              <div class="el-input-group__prepend">所属中心</div>
              <el-select
                v-model="centerArray"
                placeholder="请选择中心"
                style="width:100%"
                size="mini"
                clearable
                :filterable="true"
                reserve-keyword
                @visible-change="centerVisible"
              >
                <el-option
                  v-for="item in centers"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="el-input-group el-input-group-prepend" style="width:100%">
              <div class="el-input-group__prepend">个人</div>
              <el-select
                v-model="peopleArray"
                placeholder="请选择中心"
                style="width:100%"
                size="mini"
                clearable
                :filterable="true"
                reserve-keyword
                remote
                :loading="loadingPeraon"
                :remote-method="peooleChangeVisible"
                @visible-change="peooleChangeVisible"
              >
                <el-option
                  v-for="item in people"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="el-input-group el-input-group-prepend" style="width:100%">
              <div class="el-input-group__prepend">创建日期</div>
              <div class="selectDateBox">
                <el-date-picker
                  v-model="dataArray"
                  size="mini"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="-"
                  start-placeholde="开始日期"
                  end-placeholde="结束日期"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="el-input-group el-input-group-prepend" style="width:100%">
              <div class="el-input-group__prepend">卡片名称</div>
              <el-input v-model="inputName" placeholder="请输入卡片名称" size="mini"></el-input>
            </div>
          </el-col>
          <!-- <el-col :span="15"></el-col> -->
          <el-col :span="8" >
            <el-button
              class="el-button-query-mini"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="searchDate"
            >查询</el-button>
            <el-button
              class="el-button-query-mini"
              size="mini"
              type="primary"
              icon="fa fa-eraser"
              @click="handleReset"
            >重置</el-button>
            <el-button
              class="el-button-query-mini"
              size="mini"
              type="primary"
              icon="el-icon-download"
              @click.native="exportExcel()"
            >导出</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="padding:5px 20px 15px">
        <el-popover placement="bottom" trigger="click" width="326">
          <div class="el-input-group el-input-group-prepend" style="width:100%">
            <div class="el-input-group__prepend">新增字段</div>
            <el-select
              v-model="cleckedColumns"
              placeholder="请选择"
              style="width:100%"
              size="mini"
              clearable
              :filterable="true"
              multiple
              collapse-tags
              class="w-select"
              reserve-keyword
              @change="changeCheckedColumns"
            >
              <el-option v-for="item in checkboxGroup" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <el-button slot="reference" class="btn" size="mini" icon="el-icon-plus"></el-button>
        </el-popover>
        <div style="margin-top:5px">
          <el-table
            v-loading="loading"
            :data="tableList"
            element-loading-text="loading"
            border
            fit
            stripe
            highlight-current-row
            row-key="ID"
            lazy
            height="430"
          >
            <el-table-column label="序号" align="center" width="70">
              <template scope="scope">
                <span>{{(listQuery.currentPage-1)*listQuery.pageSize+scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              sortable
              label="卡片编号"
              property="cardName"
              :show-overflow-tooltip="true"
              resizable
            ></el-table-column>
            <el-table-column
              sortable
              label="姓名"
              property="name"
              :show-overflow-tooltip="true"
              resizable
            ></el-table-column>
            <el-table-column
              sortable
              label="性别"
              property="sex"
              :show-overflow-tooltip="true"
              resizable
            ></el-table-column>
            <el-table-column
              sortable
              label="意向编号"
              property="intenNum"
              :show-overflow-tooltip="true"
              v-if="colData[0].istrue"
              resizable
            ></el-table-column>
            <el-table-column
              sortable
              label="项目编号"
              property="belgNum"
              :show-overflow-tooltip="true"
              v-if="colData[1].istrue"
              resizable
            ></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.currentPage"
            :page-sizes="pageSizes"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align:right"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import tools from "@/utils/tools";
import ItemVue from "@/layout/components/Sidebar/Item.vue";
export default {
  data() {
    return {
      peopleArray: "",
      loadingPeraon: false,
      people: [
        { userId: "1", userName: "卡卡" },
        { userId: "3", userName: "黑黑" },
      ],
      loading: false,
      tableList: [
        { cardName: "1", name: "卡卡", sex: "女", intenNum: "2", belgNum: "3" },
        { cardName: "3", name: "黑黑", sex: "男", intenNum: "4", belgNum: "5" },
      ],
      downLoading: false,
      dataTime: "",
      centerArray: "1",
      dataArray: "",
      pickerMinDate: null,
      pickerMaxDate: null,
      days: 30 * 24 * 3600 * 1000,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.days ||
              time.getTime() < this.pickerMinDate - this.days
            );
          }
        },
      },
      inputName: "",
      centers: [
        {
          orgCode: 1,
          orgName: "研发中心",
        },
        {
          orgCode: 2,
          orgName: "数据中心",
        },
      ],
      cleckedColumns: ["全选", "intenNum", "belgNum"],
      oldcleckedColumns: [[]],
      checkboxGroup: ["全选"],
      fit: ["cardName", "name", "sex"],
      colData: [
        { title: "意向编号", istrue: false, value: "intenNum" },
        { title: "项目编号", istrue: false, value: "belgNum" },
      ],
      pageSizes: [20, 40, 60, 80],
      total: 44,
      listQuery: {
        pageSize: 20,
        currentPage: 1,
      },
    };
  },
  created() {
    this.colData.forEach((item) => {
      this.checkboxGroup.push(item.title);
    });
    const start = new Date();
    const end = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
    this.dataArray = [start, end];
  },
  watch: {
    cleckedColumns(val) {
      this.fit = ["cardName", "name", "sex"];
      let arr = this.checkboxGroup.filter((i) => !val.includes(i));
      this.colData.filter((i) => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
          this.fit.push(i.value);
        }
      });
    },
  },
  mounted() {},
  methods: {
    changeCheckedColumns(val) {
      tools.allSelectFun(
        this,
        val,
        "oldcleckedColumns",
        "cleckedColumns",
        "checkboxGroup",
        "全选",
        null
      );
    },
    // tableListselect() {
    //   this.loading = true;
    //   //调接口传参
    //   buss({ centerId: this.centerArray ,currentPage:this.listQuery.currentPage,pageSize:this.listQuery.pageSize}).then((res) => {
    //     this.loading = false;
    //     this.total = res.totalCount;
    //     this.tableList = res.data;
    //   });
    // },
    peooleChangeVisible(val) {
      if (val !== true && val !== false && val !== "") {
        let obj = { ctrId: THIS.centerArray, filter: val };
        this.loadingPeraon = true;
        // query(obj).then((res) => {
        //   this.people = res.data;
        //   this.loadingPeraon = false;
        // });
      } else if (val !== false) {
        let obj = { ctrId: THIS.centerArray };
        this.loadingPeraon = true;
        // query(obj).then((res) => {
        //   this.people = res.data;
        //   this.loadingPeraon = false;
        // });
      }
    },
    changeDate(v) {
      console.log(v);
    },
    centerVisible() {},
    searchDate() {
      // if(this.dataTime.length==0){
      //     return this.$message.warning("请选择日期")
      // }
      // if(!this.centerArray) return this.$message.warning("bixuanz")
      this.loading = true;
      // this.tableListselect()
    },
    handleReset() {
      this.centerArray = [];
    },
    async exportExcel() {
      //   if (this.total > 10000) {
      //     return this.$message.warning("选择超过10000条，请重选");
      //   }
      //   try {
      //     let obj={
      //         centerId:this.centerArray
      //     };
      //     this.downLoading=true
      //     let response=await down(obj);
      //     const filename=`业务意向.xls`
      //     const url =window.URL.createObjectURL(new Blob([response]))
      //     if(window.navigator && window.navigator.msSaveOrOpenBlob){
      //         navigator.msSaveBlob(new Blob([response]),filename)
      //     }else{
      //         const link=document.createElement("a")
      //         link.style.display="none"
      //         link.href=url
      //         link.setAttribute("download",filename)
      //         document.body.appendChild(link)
      //         link.click()
      //     }
      //     this.downLoading=false
      //   }catch(error){
      //       this.downLoading=false
      //       console.log(error)
      //   }
    },
    handleSizeChange(val) {
      this.listQuery.currentPage = val;
      //   this.tableListselect();
    },
    handleCurrentChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.currentPage = 1;
      //   this.tableListselect();
    },
  },
};
</script>
<style lang="sass" >
@import "../index.scss"
</style>
